import React, { Component } from 'react';
import Editor from '@/utils/Editor';
import { Icon,Button,Row,Col } from 'antd';
import {withPropsAPI} from "gg-editor";
import styles from './index.less';
import {connect} from "dva/index";
import {message} from "antd/lib/index";
import savebuttom from '@/assets/account/robotSetup/savebuttom.png';

@connect(({ dialogCommon, loading }) => ({
  dialogCommon,
  loading: loading.models.data,
}))
class ActionReply extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      dialogId: props.dialogId,
      nodeId: props.nodeId,
      stage: props.stage,

      content: "",
      stageId: "",
    };
  }
  componentDidMount() {
    this.getInit();
  };

  getInit = () =>{
    const { nodeId, dialogId, stage } = this.state;
    console.log("nodeId: " + nodeId + ", dialogId :" + dialogId);
    const { dispatch } = this.props;
    dispatch({
      type: 'dialogCommon/getStage',
      payload: {
        dialogId: dialogId,
        nodeId: nodeId,
        stage: stage,
        field: "reply",
      },
      callback:(res)=>{
        console.log("动作-回复 :" + JSON.stringify(res));
        this.setState({
          stageId: res.dialogStage._id,
          content: res.dialogStage.reply == null?"":res.dialogStage.reply.content,
        })
      }
    });
  };
  save = () =>{
    const { nodeId, dialogId, stageId } = this.state;
    console.log("nodeId: " + nodeId + ", dialogId :" + dialogId);
    const { dispatch } = this.props;
    const con = `editorRef`;
    if(this.refs[con].getUeditorContent() === ''){
      return message.error('回复内容不可为空，请填写后再做保存')
    }
    dispatch({
      type: 'dialogCommon/saveStage',
      payload: {
        _id: stageId,
        field: "reply",
        reply: {
          content: this.refs[con].getUeditorContent(),
          exit:'',
          setTime:new Date().getTime()
        },
      },
      callback:(res)=>{
        console.log("动作-回复-保存结果 :" + JSON.stringify(res));
        if(res.code === 0){
          message.info("保存成功");
        }else{
          message.info("保存失败");
        }
      }
    });
  }

  render() {
    return(
      <div tt="1">
        <Row>
          <Col xs={24}>
            <div className={styles.title}>
              <span>回复内容</span>
            </div>
          </Col>
        </Row>
        <div className='fuwenben' style={{ lineHeight: '20px',  width: 'calc(100vw - 405px)', zIndex:1,paddingLeft:'30px',marginTop:'30px' }}>
          <Editor content={this.state.content} name="content" id="content" height="300" width="400" ref="editorRef" />
        </div>

        <div className={styles.flexcen}>
          {/*<Button type="primary" style={{marginLeft:'15px'}} onClick={this.save}>保存</Button>*/}
          <img onClick={this.save} src={savebuttom} />
        </div>
      </div>
    )
  }
}

export default withPropsAPI(ActionReply);
